<template>
	<div>
		<h2>这是一个异步加载的Child组件</h2>
		<el-date-picker
			v-model="dateRange"
			type="daterange"
			:disabled-date="handleDisabledDate"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			value-format="YYYY-MM-DD"
			@calendar-change="handleChange"
		>
		</el-date-picker>
	</div>
</template>
<script setup lang="ts">
import { watch, defineProps, onMounted, ref, reactive } from "vue";
const props = defineProps({
	personData: {
		type: Array,
		default: () => []
	}
});
const dateRange = ref<string[]>([]);
const startDate = ref<Date | null>(null);
const endDate = ref<Date | null>(null);

// 核心日期禁用逻辑
function handleDisabledDate(time: Date) {
	// 如果有开始日期，禁用所有在开始日期之前的日期
	if (startDate.value && time < startDate.value) {
		return true;
	}
	// // 如果有结束日期，禁用所有在结束日期之后的日期
	// if (endDate.value && time > endDate.value) {
	// 	return true;
	// }
	return false;
}
function handleChange(time: [Date, Date] | Date) {
	// 确保处理的是日期范围
	if (Array.isArray(time)) {
		const [start, end] = time;
		startDate.value = start;
		endDate.value = end;
	}
}
onMounted(() => {
	console.log("挂载", props.personData);
});
watch(
	() => props.personData,
	newVal => {
		console.log("newVal", newVal);
	},
	{
		immediate: false
	}
);
</script>
